<template>
  <el-dialog :title="form.id? '编辑权限点' : '新增权限点'" :visible="showDialog" @close="closeDialog">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="form.name" style="width:90%" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="form.code" style="width:90%" />
      </el-form-item>
      <el-form-item label="权限描述">
        <el-input v-model="form.description" style="width:90%" />
      </el-form-item>
      <el-form-item label="开启" prop="enVisible">
        <el-switch
          v-model="form.enVisible"
          active-value="1"
          inactive-value="0"
        />
      </el-form-item>
      <el-form-item>
        <el-row style="width:80%" type="flex" justify="center">
          <el-button size="mini" type="primary" @click="AddPermission">确定</el-button>
          <el-button size="mini" @click="cancelClick">取消</el-button>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { AddPermission, getPermissionDetail, updatePremission, getPermissionList } from '@/api/permission'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    currentId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      form: {
        name: '',
        code: '',
        description: '',
        enVisible: '0', // 权限开启状态："1" 开启 "0" 不开启，默认开启
        type: 1, // 权限类型：1 一级权限 2 二级权限
        pid: 0
      },
      rules: {
        name: [
          { required: true, message: '权限名称不能为空', trigger: 'blur' },
          { validator: async(rule, value, callback) => {
            let res = await getPermissionList()
            // 如果是编辑 就把自身这一项去除
            if (this.form.id) {
              res = res.filter(item => item.id !== this.form.id)
            } if (res.find(item => item.name === value)) {
              callback(new Error('权限点名字不能和子集们现有的权限点名字重复'))
            } else {
              callback()
            }
          }, trigger: 'blur' }

        ],
        code: [
          { required: true, message: '权限标识不能为空', trigger: 'blur' },
          { validator: async(rule, value, callback) => {
            let res = await getPermissionList()
            // console.log(res)
            // 如果是编辑 就把自身这一项去除
            if (this.form.id) {
              res = res.filter(item => item.id !== this.form.id)
            } if (res.find(item => item.code === value)) {
              callback(new Error('权限标识不能和所有人重复, 应该是唯一的标识'))
            } else {
              callback()
            }
          }, trigger: 'blur' }

        ]
      }
    }
  },
  methods: {
    async getPermissionDetail() {
    //   console.log(5)
      const res = await getPermissionDetail(this.currentId)
      //   console.log(res)
      this.form = res
    //   console.log(this.form)
    },
    // 提示 添加成功
    // 关闭弹出层
    // 重置表单
    closeDialog() {
      this.form = {
        name: '',
        code: '',
        description: '',
        enVisible: '0', // 权限开启状态："1" 开启 "0" 不开启，默认开启
        type: 1, // 权限类型：1 一级权限 2 二级权限
        pid: 0
      }
      this.$refs.form.resetFields()
      this.$emit('update:showDialog', false)
    },
    cancelClick() {
      this.closeDialog()
    },
    async AddPermission() {
      // 校验表单
      await this.$refs.form.validate()
      //   表单有id 是 修改
      if (this.form.id) {
        await updatePremission(this.form)
      } else {
        // 如果有 currentId  就是 一级权限后面的添加
        if (this.currentId) {
          await AddPermission({ ...this.form, pid: this.currentId, type: 2 })
        //   console.log(res)
        } else {
          await AddPermission(this.form)
        }
      }
      this.$message.success('添加权限成功')
      // 发送请求
      // 通知父组件更新数据
      this.$emit('updatePermission')
      // 提示 添加成功
      // 关闭弹出层
      // 重置表单
      this.closeDialog()
    }
  }
}
</script>

<style>
</style>
